<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-14 16:06:39
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container">

        <div style="padding: 20px;background-color: #fff;margin:20px 0px;padding-bottom: 0px;">
            <div style="display: flex;align-items: center;margin-bottom: 20px;">

                <div @click="currentChoose = '销售流向'" :style="{ 'border-radius': '5px 0px 0px 5px' }"
                    :class="currentChoose == '销售流向' ? 'currentChooseYes' : 'currentChoose'">
                    销售流向
                </div>
                <div @click="currentChoose = '进货流向'" :style="{ 'border-radius': '0px 5px 5px 0px' }"
                    :class="currentChoose == '进货流向' ? 'currentChooseYes' : 'currentChoose'">
                    进货流向
                </div>

            </div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="连锁名称">
                    <el-input style="width: 140px;" v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="供应商名称">
                    <el-input style="width: 140px;" v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input style="width: 140px;" v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="客户名称" v-if="currentChoose == '销售流向'">
                    <el-input style="width: 140px;" v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="销售日期" v-if="currentChoose == '销售流向'">

                    <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="formInline.user"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="进货日期" v-if="currentChoose == '进货流向'">

                    <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="formInline.user"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button style="background-color: #5CD8DA;border-color: #5CD8DA;padding: 10px 20px;" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="padding: 30px 50px;background-color: #fff;margin:20px 0px;">
            <div style="display:flex;align-items: center;" v-if="currentChoose == '销售流向'">
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/数据流向-总销售数量.png" alt=""></img>
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">总销售数量</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">4565</div>
                    </div>
                </div>

                <div style="flex: 1;display: flex;align-items: center;border-left: 1px solid #F0ECEC;border-right: 1px solid #F0ECEC;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/数据流向-总销售金额.png" alt=""></img>
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">总销售金额</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">1524841.00</div>
                    </div>
                </div>
               
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/数据流向-客户数量.png" alt=""></img>
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">客户数量</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">15445</div>
                    </div>
                </div>
            </div>

             <div style="display:flex;align-items: center;" v-else>
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;border-right: 1px solid #F0ECEC;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/数据流向-总进货数量.png" alt=""></img>
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">总进货数量</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">9712</div>
                    </div>
                </div>
                
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/数据流向-总进货金额.png" alt=""></img>
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">总进货金额</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">642135</div>
                    </div>
                </div>
             
            </div>
        </div>
        <div>

            <div style="background-color: #fff;padding: 20px;">
                <div style="text-align: right;">
                    <img style="width: 90px;height: auto;cursor: pointer;" src="@/assets/icon/按钮-导出.png" alt="">
                </div>

                <div style="margin-top: 15px;">
                    <el-table v-if="currentChoose == '销售流向'" border :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%" height="250">

                        <el-table-column prop="value1" label="商品编码"></el-table-column>
                        <el-table-column prop="value2" label="商品名称"></el-table-column>
                        <el-table-column prop="value3" label="商品规格"></el-table-column>
                        <el-table-column prop="value4" label="生产厂家"></el-table-column>
                        <el-table-column prop="value5" label="国药准字"></el-table-column>
                        <el-table-column prop="value6" label="供应商名称"></el-table-column>
                        <el-table-column prop="value7" label="销售连锁"></el-table-column>
                        <el-table-column prop="value8" label="销售门店"></el-table-column>
                        <el-table-column prop="value9" label="客户名称"></el-table-column>
                        <el-table-column prop="value10" label="销售数量"></el-table-column>
                        <el-table-column prop="value11" label="销售金额"></el-table-column>
                        <el-table-column prop="value12" label="销售日期"></el-table-column>

                    </el-table>
                    <el-table v-else border :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%" height="250">

                        <el-table-column prop="value1" label="商品编码"></el-table-column>
                        <el-table-column prop="value2" label="商品名称"></el-table-column>
                        <el-table-column prop="value3" label="商品规格"></el-table-column>
                        <el-table-column prop="value4" label="生产厂家"></el-table-column>
                        <el-table-column prop="value5" label="国药准字"></el-table-column>
                        <el-table-column prop="value6" label="供应商名称"></el-table-column>
                        <el-table-column prop="value7" label="进货连锁"></el-table-column>
                        <el-table-column prop="value10" label="进货数量"></el-table-column>
                        <el-table-column prop="value11" label="进货金额"></el-table-column>
                        <el-table-column prop="value12" label="进货日期"></el-table-column>


                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            myChart: null,
            option: null,
            currentChoose: '销售流向',
            tableData: [{
                 value1: 'XDWF11213',
                 value2: '银翘咽喉浸膏',
                 value3: '粒',
                 value4: 'XDWF11213',
                 value5: '一新制药',
                 value6: '全国',
                 value7: '全国',
                 value8: '一新制药',
                 value9: '1200',
                 value10: '18',
                 value11: '2025-10-14',

            }],
            checkIndex: 0,
            list: ['今天', '近7日', '近30日', '自定义'],
            iconList: [
                {
                    name: '在库品规数',
                    imgName: '动销管理1-在库品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '断货品规数',
                    imgName: '动销管理2-断货品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '动销品规数',
                    imgName: '动销管理3-动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'

                },
                {
                    name: '不动销品规数',
                    imgName: '动销管理4-不动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天不动销成本额',
                    imgName: '动销管理5-90天不动销成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'

                },
                {
                    name: '近40天动销率',
                    imgName: '动销管理6-近40天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '近90天动销率',
                    imgName: '动销管理7-近90天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '断货损失',
                    imgName: '动销管理8-断货损失',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天以上积压成本额',
                    imgName: '动销管理9-90天以上积压成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '库存周转天数',
                    imgName: '动销管理10-库存周转天数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },

            ]
        }
    },
    mounted() {


    },
    methods: {
       


    }
}
</script>
<style></style>
<style lang="scss" scoped>
.currentChooseYes {
    width: 80px;
    border: 1px solid #70DEDF;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #E6FFFF;
    color: #70DDDF;
    cursor: pointer;
    font-size: 14px;


}

.currentChoose {
    width: 80px;
    border: 1px solid #E5E4E9;
    text-align: center;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    font-size: 14px;

}

.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 3px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    width: 120px;
    height: 70px;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 5px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;


}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
</style>
